<template>
  <div id="app">
    <h1 class="mylogo"><a href="#page1">360安全浏览器</a></h1>
    <ul id="menu">
      <li data-menuanchor="page1" class="active">
        <a href="#page1">第一屏</a>
      </li>

      <li data-menuanchor="page2">
        <a href="#page2">第二屏</a>
      </li>

      <li data-menuanchor="page3">
        <a href="#page3">第三屏</a>
      </li>

      <li data-menuanchor="page4">
        <a href="#page4">第四屏</a>
      </li>
    </ul>
    <full-page :options="options" id="fullpage" ref="fullpage">
      <div class="section">
        <Section1 :iscurrent="currentid" />
      </div>
      <div class="section">
        <div class="slide">
          <Section2 :iscurrent="currentid" />
        </div>
        <div class="slide">
          <h3>Slide 2.2</h3>
        </div>
      </div>
      <div class="section">
        <Section3 :iscurrent="currentid" />
      </div>
      <div class="section">
        <Section4 :iscurrent="currentid" />
      </div>
    </full-page>
  </div>
</template>

<script>
import Section1 from "@/components/Section1.vue";
import Section2 from "@/components/Section2.vue";
import Section3 from "@/components/Section3.vue";
import Section4 from "@/components/Section4.vue";

export default {
  data() {
    return {
      options: {
        licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
        anchors: ["page1", "page2", "page3", "page4"],
        afterLoad: this.afterLoad,
        scrollOverflow: true,
        scrollBar: false,
        verticalCentered: true,
        // paddingBottom: "100px",
        // paddingTop: "100px",
        menu: "#menu",
        navigation: true,
        sectionsColor: ["#0da5d6", "#2AB561", "#DE8910", "#16BA9D", "#0DA5D6"]
      },
      currentid: "0"
    };
  },
  components: {
    Section1,
    Section2,
    Section3,
    Section4
  },
  methods: {
    afterLoad(origin, destination) {
      // console.log(destination.index);
      this.currentid = destination.index;
    }
  }
};
</script>

<style scoped lang="scss">
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: #fff;
}
table {
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
#app {
  text-align: center;
}
#app .mylogo {
  width: 170px;
  height: 34px;
  background: url("./images/360Logo.png") no-repeat center;
  background-size:contain;
  position: fixed;
  left: 30px;
  top: 30px;
  z-index: 999;
}
#app .mylogo a{
  display: inline-block;
  text-indent: -999px;
  width: 100%;
  height: 100%;
}

#menu {
    width: 600px;
    height: 50px;
    position: fixed;
    z-index: 999;
    list-style: none;
    margin-top: 25px;
    right: 20px;
}
#menu li {
  width: 120px;
  height: 30px;
  border: 1px solid white;
  border-radius: 10px;
  float: left;
  margin-left: 15px;
  line-height: 30px;
}

</style>
